Закладки

Основные понятия типографики
и инструменты верстки

Советы по работе с текстовым материалом. Как его структурировать, как ориентировать читателя, как работать с микротипографикой.
Мы рассмотрим общие понятия и знания по работе с текстом, которые сформировались и утвердились еще в книгоиздании, стали фундаментальными и частично перешли в журналы и другие печатные формы. В веб-типографике есть свои особенности, которые мы рассмотрим в разделе «Типографика в вебе. Функциональные компоненты статьи».
Типографика и верстка — два тесно связанных друг с другом понятия. Для начала нужно определиться, что это такое.

О типографике замечательно сказал знаменитый английский типограф и шрифтовой дизайнер Стенли Морисон:
Типографика — это искусство подобающего расположения наборного материала сообразно конкретному назначению
Верстка — процесс работы над типографикой. Хорошая верстка завит от мастерства дизайнера или верстальщика распределить и оформить текст в макете.
Работа над типографикой — очень важный процесс, он требует внимания и умения «копаться в деталях», это особый труд и довольно кропотливый. Любой продукт с недоработанным текстом будет выглядеть плохо, какими бы интересными и качественными не были в нем картинки.

Как начинающему дизайнеру определить качество типографики? Главное свойство хорошо cверстанного текста — незаметность, лаконичность. При чтении вам ничто не должно мешать воспринимать информацию.

Существует понятие — «серебро набора». Это свойство хорошо сверстанного текста, который смотрится в проекте ровным и цельным серым блоком. Эта самая равномерность и называется «серебром набора». Для текста, особенно рассчитанного на линейное чтение, это незаменимое качество.
Текстовый блок на странице смотрится ровным серым полотном, и даже выделения в тексте незаметны и не вызывают зрительного дискомфорта.

Структуризация текста

Для чего нужен анализ текста, что такое рубрики и элементы навигации.

Для того, чтобы опубликовать какую-то информацию, весь текст структурируют и присваивают его частям свое назначение. Есть текст основной информации, есть тот, который его дополняет.
Основной текст предназначен для сплошного или линейного чтения. Он должен выглядеть максимально простым и не выделяющимся. Мы воспринимаем текст намного лучше, если нас ничто не отвлекает.

Дополнительный текст — предисловия, примечания, сноски, цитаты, комментарии, поясняющие или подтверждающие слова. Такие тексты содержат важные сведения, но не отражают основную мысль послания.
Примеры оформления основного и дополнительного текстов. Они отличаются друг от друга графически: размером кегля, насыщенностью, дополнительными графическими элементами

Рубрикация и навигация

С чего нужно начинать, если у вас есть интересная история, статья, или вы написали целую книгу и хотите опубликовать готовый продукт? Для начала, текст нужно структурировать, разделить на отдельные смысловые части и главы, то есть провести рубрикацию, структуризацию текста.
Рубрикация — система заголовков и подзаголовков, связанных между собой по смыслу и имеющих иерархию значимости. Заголовок может делить текст на большие разделы, внутри которых будут свои заголовки меньшей значимости.

Рубрики — заголовки частей публикации (большие заголовки разделов, внутренние заголовки их подразделов).
Страничка журнала Shoppinghour magazine. Пролог разделен на основной заголовок с описанием и состоит из коротких записей с заголовками
Структура нужна для того, чтобы зритель мог ориентироваться в большом тексте. Опять же, воспринимать объемный текст без каких-то смысловых пауз очень тяжело. Открывая текст, мы знакомимся с ним с помощью рубрик.

В рубрикации можно выделить простые и сложно-составные заголовки


Заголовок / основной текст

Заголовок / подзаголовок / основной текст

Заголовок / подзаголовок / описание / основной текст
Размеры текста дизайнер регулирует, исходя из своего опыта. Но существуют и рекомендуемые математически вычисленные значения:
16–22px для оcновного текста
55–75 символов в строке
В печатных изданиях размеры шрифтов измеряются в пунктах (pt), а на экране — в пикселях (px). Их можно вычислить по формуле, например:
12 пунктов (pt) × (96/72) = 16 пикселей (px)
Также для вычисления пропорций можно использовать формулу «Золотого сечения»: заголовок / подзаголовок = 1,618. Оно поможет найти гармоничное сочетание размеров в тексте, но «золотое сечение» — не догма.
Золотое сечение — гармоничная пропорция, где большее значение числа относится к меньшему так же, как их сумма к большему, а математический коэффициент равен 1,618. Золотое сечение было открыто еще в древности, принципу золотого сечения в той или иной мере соответствует все живое на Земле, (пропорции человека или строение раковины моллюска) поэтому его еще называют «божественной пропорцией».
К навигации в тексте относятся: оглавление, колонцифры, колонтитулы, ссылки, пометки. Иногда в навигацию добавляют вспомогательные графические элементы. Для удобства восприятия информации важно делить объемный текст на абзацы.
1

Оглавление

Оглавление­ — список разделов или глав с указанием номера страницы, на которых они находятся. Оглавление — важный элемент навигации, в книгах его чаще всего располагают в начале или в конце издания.
Графически оглавление оформляют по-разному. Важно, чтобы оно отвечало общему стилю и не выглядело чужеродным. Нестандартно оформленная страница не должна терять свое функциональное значение. Читатель должен сразу определить в каком месте искать интересующий его материал.
Примеры оформления оглавлений. На всех четко прослеживается структура: название главы и номер страницы
В вебе нет оглавления как такового, его роль выполняет меню. Например, в лонгридах (мультимедийный формат подачи объемных текстов и визуального контента в виде статьи) удобным способом ориентироваться по главам служит меню «гамбургер».
Лонгрид про Арктику поделен на четыре главы, меню позволяют переходить по ссылке на новую страницу.
2

Колонцифра и колонтитул

Колонцифра — номер страницы. Так как это навигационный элемент, он не должен мешать воспринимать основную информацию. Чаще всего, в книгах их проставляют на полях или внизу блока основного текста.

Колонтитул — элемент навигации наравне с колонцифрой. Колонтитулы используют, в основном, в печатной продукции. Выглядят они как короткие строки текста на полях, в которых продублированы название раздела, имя автора или название рубрики.
Распространенные способы расположения колонцифры и колонтитула в печатных изданиях.
3

Шмуцтитул

Шмуцтитул — это «мини-обложка» перед началом нового раздела в книге или журнале. Традиционно, его располагают на правой полосе издания. Если оглавление расскажет вам, какие разделы есть в издании, то шмуцтитул расскажет, что будет в следующей рубрике.
В данном случае каталог поделен на разделы по шрифтовым классам. В заголовках указан раздел и номер его страницы.

Шмуцтитул — тоже больше полиграфическая история. Но подобные блоки можно найти встретить и в вебе, например, в лонгридах. В них разделы часто отделяют друг от друга обложками с названием раздела.

Лонгрид об истории анимации поделен на шесть глав. В качестве шмуцтитула используется обложка с номером и названием главы.
4

Абзац

Абзац — это часть текста, выражающая законченную мысль. Абзацы принято отделять друг от друга графически, а способов это сделать довольно много.
В полиграфии самый распространенный прием выделения абзацев: «красная строка» — строка текста, которая начинается с отступа.

По правилам типографики в первом абзаце на странице отступ не ставится, так как «красная строка» нужна для того, чтобы читатель мог легко найти начало абзаца. Первый абзац находится без труда и так.
Другой вариант — «швейцарский абзац». Абзацы выделяются с помощью отбивок, равных одной строке. Этот прием иногда используется в полиграфии и широко распространен в вебе.
Абзацы можно выделять с помощью «втяжки». Это сокращение строк абзаца или их отступ слева или справа.
А также абзацы можно выделить графическими элементами. Графики не должно быть много — текст должен оставаться удобочитаем.

Рекомендации по работе с версткой

За чем следить и над чем работать в тексте. Основные проблемы верстки и их решение.

Заливая текст, дизайнер или верстальщик должен знать, о чем текст, объективно соотносить его количество и количество места для него. Уже внутри макета начинается более тонкая работа (микротипографика).

Текст заверстывают с помощью системы сеток, в которых располагаются тестовые блоки и колонки. В зависимости от типа сетки и задумки дизайнера текст может заполнять, например, одну колонку, две, три или больше.
Внутри блоков текст может быть по-разному ориентирован, в зависимости от поставленной задачи. Основные типы: полная выключка (justify), выключка по центру (align center), флаговая выключка (align left, align right).
Блок текста с автоматически выставленной выключкой по формату (justify) выглядит «дырявым» и нуждается в сложных настройках межбуквенных и межсловных расстояний. Поэтому намного чаще в текстах можно встретить флаговую выключку.

«Дырявые» и «жидкие» строки (loose line)

«Жидкие» строки — явление в текстовом блоке, когда межсловные расстояния в каких-то местах становятся значительно больше других, образуя «дыры» в тексте.

«Коридоры» или «ручьи» — явление, когда межсловные пробелы совпадают в соседних строках по вертикали или диагонали.
«Дыры» и «ручьи» в тексте чаще всего встречаются при полной выключке (выключке по формату). Такой блок сложнее всего редактировать.

Рваные края текстового блока

Рваный край­ — слишком большие расстояния между словами и знаками в тексте. Частое свойство текстового блока с флаговой выключкой, так как только один край блока зафиксирован, ровность второго края зависит от того, сколько знаков поместится в строку.
Не обязательно ровнять весь блок как при полной выключке, но слишком большая разница длин строк создает дисбаланс, лишнюю контрформу и выглядит неаккуратно.

За краем верстки текста следят в основном в полиграфии. В вебе рамки не такие жесткие.
Контрформа — пространство, которое образуется между двумя формами (изображение и текстовый блок, графическая форма и край фона)
Проще говоря, если представить текст и иллюстрации серыми формами, то форма белого листа, которая ничем не заполнена, — и есть контрформа.

Контрформа может быть активной и неактивной, выразительной и нет. Дизайнеры часто используют ее как визуальный эффект и ключевой элемент оформления текстов.
Пример использования контрформы между колонками текста и краями страницы. Контрформа здесь — стилистический прием
Полоса газеты The New York Times. Контрформа — самолет, не заполненное текстом пространство. Здесь это — художественный прием в поддержку к содержанию статьи об отслеживании воздушного судна

Предлоги и союзы в конце строки

Еще часто называют «висячими предлогами». Их не оставляют в конце строки, так как в этом месте читатель невольно делает паузу, а предлог или союз напрямую связан с последующим словом. Несколько строк подряд с повторяющимися союзами разрушают первоначальный ритм строки и создают «коридор».
Однобуквенные слова, союзы и предлоги не оставляют в конце строки
В полиграфии однобуквенные слова регулируют специальными вставками символов в программах верстки.
Неразрывный пробел — символ, который соединяет соседние слова и не дает им оказаться на разных строках.

Мягкий перенос — используйте его, чтобы перенести слово, перед которым он стоит, на следующую строку.
В вебе это специальные невидимые символы в языке HTML, которые ставятся между символами текста и либо связывают их, либо ука­зывают место внут­ри сло­ва, по ко­то­рому это сло­во мо­жет быть пе­ре­не­се­но на дру­гую строку.

­ — мягкий перенос
  — неразрывный пробел
Случаи использования неразрывного пробела:

  • Инициалы
  • Сокращения с точками
  • Числа с последующим словом или единицей измерения
  • Предлоги, союзы и некоторые частицы
  • Тире с предыдущим словом
Старайтесь правильно подготовить свой текст в редакторе еще до начала верстки: проверьте орфографию, нет ли лишних пробелов или отбивок.
1
Не используйте больше одного пробела подряд, это «дырявит» текст и делает его «жидким».
2
Настройка текста с переносом поможет выровнять текстовый блок и избавить его от «дыр» и «коридоров».
3
Попробуйте незаметно отрегулировать ширину текстового блока. Это может помочь выровнять край колонки, избавиться от «коридоров» и сделать текст визуально чище.
Сервисы, которые помогут улучшить качество вашего текста и просканируют текст на наличие ошибок в грамматике или пунктуации:

Висячие и короткие концевые строки (widows and orphans)

Это проблема в наборе, когда в начале новой колонки мы видим последнюю строку абзаца или наоборот, когда его первая строка заканчивает текстовый блок. Висячие и кроткие концевые строки нарушают размер блока, делают его визуально короче.

В конце абзаца могут образоваться короткие концевые строки. Их тоже лучше избегать, они разрушают ритм и создают впечатление отбивки между строками в тексте. К тому же, иногда они могут совпасть с абзацным отступом. Следите, чтобы в начале и в конце текстового блока помещалось не менее трех полных строчек.
Примеры висячих и коротких концевых строк. В начале и в конце текстового блока оставляйте не меньше трех полных строк.

Трекинг и кернинг

Трекинг — это равномерное изменение расстояний между символами во всем текстовом блоке. То есть изменение его плотности.

Кернинг — это корректировка расстояния между отдельной парой знаков.
Настройка этих параметров может помочь с проблемой висячих строк и висячих предлогов. Кернинг регулируют для составления заголовков, дизайна логотипов, для придания тексту определенной стилистики.

Если слово набрано крупным кеглем, стоит иногда немного уменьшить расстояния между буквами, чтобы они не разлетались и не нарушалась цельность строчки.

Если буквы маленькие, можно немного увеличить эти расстояния, чтобы дать больше воздуха и облегчить визуально текст.
Существует понятие «кернинговые пары». Это пары знаков, расстояние между которыми приходится иногда регулировать вручную из-за особенности их начертания.
Кернинговая пара AV без изменения кернинга
Кернинговая AV с измененным кернингом
Апрош — расстояние между соседними буквами. Он состоит из двух полуапрошей стоящих рядом знаков.

Полуапрош — расстояние от края кегельной площадки до крайней точки рисунка буквы. Выделите одну букву и увидите, что границы выделения по бокам чуть выходят за пределы рисунка букв. Эти расстояния по бокам и называются полуапрошами.
Когда проектируют шрифт, то кроме самой буквы закладывают еще прямоугольную площадку (кегельная площадка), на которой эта буква помещается. В цифровых шрифтах она тоже учитывается, просто ее не видно.
Апрош (расстояние между a и b) состоит из двух полуапрошей этих букв

Короткие и длинные строки

Слишком длинная сбивает с толку и заставляет делать большую паузу после каждой строки.

Слишком короткая зацикливает чтение и заставляет перечитывать одно и то же по второму разу.
Существует правило, что стандартно в строке должно быть около 55-60 знаков для комфортного чтения. Строки в текстовом блоке для линейного чтения не должны быть ни слишком длинными, ни слишком короткими.

Чтобы текст можно было комфортно читать, важно найти баланс между количеством знаков и расстоянием между строчками.
Пример слишком длинного текстового блока относительно размера шрифта и интерлиньяжа.
В данном случае колонка текста слишком узкая, а расстояние между строками слишком большое. Чтение все время прерывается, колонка выглядит рваной и не аккуратной.
Колонка текста выровнена, найдены соотношения размера текста, интерлиньяжа и длины строки.

Интерлиньяж

Интерлиньяж — расстояние между базовыми линиями соседних строк в тексте.

Межстрочный интервал — просвет между строками или расстояние от базовой линии до верхней точки строчных букв на следующей строке.
Интерлиньяж
Межстрочное расстояние
Комфортность чтения текста зависит от сочетания длины строк, расстояния между строками и размером букв текста.
Оптимальный интерлиньяж основного текста примерно должен быть равен или быть чуть больше высоты букв. Опытный дизайнер интуитивно понимает какой размер кегля выбрать и какой интерлиньяж подобрать, но есть рекомендуемые соотношения величин:
Длина строки / интерлиньяж = 28
Интерлиньяж / размер основного текста = 1.5
Абзацный отступ / интерлиньяж = 0.8
Существует понятие — «отрицательный интерлиньяж». Это значит, что расстояние между строчками в тексте меньше, чем высота букв. Используется в тексте крупного кегля, например, в заголовках.

Ниже пример набора крупных заголовков c «отрицательным интерлиньяжем» на сайте. Чтобы большой заголовок смотрелся цельным блоком и не «разваливался», расстояние между строками делают меньше кегля букв.
Удобочитаемость не нарушается еще из-за того, что фраза емкая и короткая.
Если вы только начинаете заниматься типографикой и не уверены в выборе размеров шрифтов, интерлиньяжа и длины строк, используйте сервисы, которые помогут вам рассчитать и сгенерировать оптимальные значения этих величин.

Например, на сайте pearsonified.com можно получить советы по улучшению типографики на основе размера шрифта, ширины блока контента и количества символов в строке.

Знаки препинания

Полезные сведения о выборе знаков и расстановке их в предложении.

Знаки препинания — это такой же полноценный и требующий внимания организм, как и буква. Ими нужно уметь пользоваться, это показывает грамотность и подготовленность автора.

К знакам препинания относятся: кавычки, скобки, точки, запятые, тире и дефисы, вопросительный и восклицательный знаки.

Кавычки

Кавычки — это знак препинания, который выделяет названия, прямую речь или цитаты. В русской типографике есть свои правила и иерархия использования кавычек.
«Ёлочки» — главные кавычки в наборе в русском языке.

«Лапки» — второстепенные, можно использовать только в том случае, если внутри цитаты нужно сделать еще одно выделение.

«Английские одиночные» кавычки — их используют, если слово переведено с другого языка.
В разных лингвистических системах свои правила постановки кавычек, и их рисунок тоже может отличаться.

Так, например, в английском языке используют английские одиночные и двойные кавычки. Одиночные считаются основными, а двойные применяются внутри выделенного текста. В Америке иерархия обратная.

Знак препинания рядом со скобками или кавычками

Если знак препинания относится по смыслу только к выделенной фразе, то его ставят внутри кавычек и скобок, а если ко всему предложению, то за их пределами.

Многоточие

Многоточие часто по ошибке называют «троеточием». На самом деле, многоточие — это самостоятельный знак, а не три точки, набранные подряд. Отличаются они шириной знака. Для использования многоточия вместе с вопросительным и восклицательным знаком для него устанавливают положительный кернинг.
Не набирайте три точки подряд для оформления незаконченной фразы. В палитре символов для этого есть специальный знак многоточия.

Тире и дефис (dash and hyphen)

Дефис — самая короткая черта. Используют ее для переносов в тексте и соединения сокращенных слов. По бокам дефиса не ставят пробелы.

Короткое тире используют при обозначении интервалов в датах или времени. По бокам тоже не ставят пробелов, потому что, как правило, в самом знаке предусмотрены полуапроши.

Длинное тире используют для оформления прямой речи (стоит в начале предложения), между словами, образующими смысл «от — до» и со словами-определениями. Длинное тире отбивают пробелами с двух сторон.
Строка не должна начинаться с дефиса или тире (исключение — прямая речь), поэтому эти знаки всегда завершают строчку. Составные слова, типа «человек-слон» старайтесь заверстать так, чтобы второе слово не переходило на следующую строку, цельность и семантика слова не нарушались.
Тире — это знак.
1990–1915гг.
ИТАР-ТАСС

Постановка пробела

Частая ошибка верстки — лишние пробелы или их нехватка. Отсутствие пробелов в нужных местах путает чтение, а лишние пробелы, опять же, «дырявят» текст. Примеры, когда и где нужно ставить пробел:
Пробел ставится после запятой, точки, двоеточия, точки с запятой, восклицательного и вопросительного знака в конце предложения. Слева их не отбивают от предложения, к которому они относятся.
Если за скобкой или кавычкой стоит знак препинания, то пробел между ними не ставится.
Внутри скобок и кавычек пробелы не ставятся, но можно ставить перед открывающим знаком и после закрывающего.

Математические знаки

Математические знаки, такие как: = + - / × и другие тоже имеют правило написания с цифрами.

  • Если знак стоит между двумя цифрами, от он отбивается по бокам пробелами.
  • Если же знак принадлежит одной цифре, то их пишут слитно.
Никогда не используйте вместо математических знаков похожие обозначения. Минус — это не тире и не дефис, вместо нуля нельзя использовать букву «О». Для математических знаков есть специальные символы в палитре глифов.
Cервисы, которые помогут подготовить ваш текст для верстки в вебе, правильно расставить символы, неразрывные пробелы, тире, кавычки:

Также в этом курсе

12
Шрифт
Сжатая теория о шрифте для работы над проектом. Краткое изложение знаний о шрифтовых классах, их строении, характере, применении.
Предыдущая
14
Модульные сетки
Что такое модульная сетка, как она помогает пользователям, дизайнерам и разработчикам, как сделать сетку и как использовать
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc